let $info = $('.info');
let id = getQueryString('couponId')
let $li = $('.li')
let $content = $('.content');
let $cancel = $('.cancel')
let imgLength 

let init = {
  url : 'http://chst.vip:1234/api/getcouponproduct?couponid=' + id ,
  success : show
}

function show (res) {
  let infoStr = '' 
  let imgStr = ''
  let i = 0;
  res.result.forEach(element => {
    
    let regExp = /^<[^<]+\s+src="([^''""]*)"/
    let imgUrl = element.couponProductImg.match(regExp)
    imgStr += `                
    <img id=${i} src="${imgUrl[1]}" alt="">`
    infoStr += `      
    <li id=${element.couponProductId}>
    <a href="">
    <div class="img">
    <img src="${imgUrl[1]}" alt="">
    </div>
    <div class="infoR">
    <div class="title">
    <h4>${element.couponProductName}
    </h4>
    </div>
    <div class="other">
    <h4 class="price">${element.couponProductPrice}</h4>
    <div class="mall">${element.couponProductTime}</div>
    </div>
    </div>
    </a>
    </li>`
    i++
  });
  // console.log(infoStr);
  $info.append(infoStr)
  $li.append(imgStr)
  imgLength = $li.children().length;
}

ajaxAPI(init)

let flag = $content.attr('flag')

$info.on('click','li',function(e){
  let id = $(this).attr('id')
  $('.carousel img').eq(id).show().siblings().hide()

  $content.attr('flag',true).css({
    display : 'block'
  })
  $content.animate({
    top: e.pageY - 150,
    left :100
  },500)

  e.preventDefault()
})

$cancel.on('click',function(){
  if($cancel.text() == '隐藏'){
    $content.hide(400)
    // $cancel.text('显示')
  }else{
    $content.show(400)
    $cancel.text('隐藏')
  }
})



let i = 0
function run() {
  // 获取下标为 i 的图片，让下标为 i 的图片显示， 其他图片隐藏
  $('.carousel img').eq(i).show().siblings().hide()
  //  获取轮播图小标为 i 的小长方形按钮，给 i 下标的按钮添加类名active，删除其他元素的类名active
  $('.item ul li').eq(i).addClass('active').siblings().removeClass('active')
}
function times() {// 每2s执行一次run函数
  return setInterval(() => {
    if (++i === imgLength) { i = 0 }
    run()
  }, 1000000000)
}
let timer = times() //调用

//  获取轮播图小按钮，绑定鼠标事件
$('.item ul li').mouseenter(function () {
        clearInterval(timer) //清除计时器
        i = $(this).index() // 获取当前鼠标所在的按钮下标
        run()
  })

  //  获取轮播图小按钮，绑定鼠标离开事件，当鼠标离开后重新启动定时器
  $('.item ul li').mouseleave(function () {
        timer = times()
  })


  // 左边< , 点击后图片向左轮播
  $('.left').click(function () {
        clearInterval(timer)
        if (--i < 0) {
              i = imgLength-1
        }
        run()
        timer = times()
  })

  // 右边> ,点击后图片向右边轮播
  $('.right').click(function () {
        clearInterval(timer)
        if (++i === imgLength) {
              i = 0
        }
        run()
        timer = times()
  })